@import 'reset';

$linkColor: #08c;
a{
    text-decoration: none;
    color: $linkColor;
    &:hover{
        color: darken($linkColor,10%);
    }
}
@mixin box-sizing($sizing){
    -webkit-box-sizing: $sizing;
    -moz-box-sizing: $sizing;
    box-sizing: $sizing;
}
.message{
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
}
.success {
    @extend .message;
    border-color: green;
}
.error {
    @extend .message;
    border-color: red;
}
.waring {
    @extend .message;
    box-border:yellow;
}

.container {
    width: 100%;
}
.article[role="main"] {
    float: left;
    width: 600px /960px *100%;
}
.aside[role="complimentary"]{
    float: left;
    width: 300px/960px * 100%;
}

.box-border{
    border:1px solid #ccc;
    @include box-sizing(border-box);
}
body{
    background-color: #efefef;
}
